<template>
    <div class="w-full relative select-none" ref="banner">
      <img class="w-full" draggable="false" src="../../../assets/img/banner.jpg" />
      <div class="absolute left-28 z-10 top-44 text-5xl text-white font-sans">
        <h3>MS-<span class="text-blue-600">AI</span> Lab</h3>
        <h3 class="mt-6 mb-3">
          <h3 class="tracking-widest">智能硬件实验系统</h3>
          <p class="w-20 h-1 bg-blue-700 mt-5 ml-2"></p>
        </h3>
        <h4 class="text-2xl mt-8">MS-AI Lab Intelligent hardware experimental system</h4>
        <button @click="experienceItNow"
                class="mt-12 w-56 h-12 bg-gradient-to-r from-[#249CF4] to-[#0067DE] text-xl tracking-wider">立即体验</button>
      </div>
    </div>
</template>

<script lang="ts" setup>
  const banner = ref()
  const experienceItNow = ()=>{
    console.log()
    scrollTo({
      top: banner.value.offsetHeight,
      behavior:'smooth'
    })
  }
</script>

